<%--
  @author Kusal Samarakoon
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>


<script src="${pageContext.request.contextPath}/lib/jquery/fullcalender/dhtmlxscheduler.js"
        type="text/javascript" charset="utf-8"></script>
<script src="${pageContext.request.contextPath}/lib/jquery/fullcalender/dhtmlxscheduler_serialize.js"
        type="text/javascript"
        charset="utf-8"></script>
<script src="${pageContext.request.contextPath}/lib/jquery/fullcalender/dhtmlxscheduler_multiselect.js"
        type="text/javascript"
        charset="utf-8"></script>

<script src="${pageContext.request.contextPath}/lib/jquery/fullcalender/dhtmlxscheduler_readonly.js"
        type="text/javascript"
        charset="utf-8"></script>
<script src="${pageContext.request.contextPath}/lib/jquery/fullcalender/dhtmlxscheduler_minical.js"
        type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/dhtmlxscheduler_glossy.css"
      type="text/css" media="screen"
      title="no title" charset="utf-8">
<script src="${pageContext.request.contextPath}/lib/jquery/fullcalender/dhtmlxscheduler_year_view.js"
        type="text/javascript"
        charset="utf-8"></script>

<script src="${pageContext.request.contextPath}/lib/jquery/fullcalender/dhtmlxscheduler_editors.js"
        type="text/javascript" charset="utf-8"></script>

<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/css/dhtmlxcombo.css">
<script src="${pageContext.request.contextPath}/lib/jquery/fullcalender/dhtmlxcommon.js"></script>
<script src="${pageContext.request.contextPath}/lib/jquery/fullcalender/dhtmlxcombo.js"></script>
<script src="${pageContext.request.contextPath}/lib/jquery/fullcalender/locale_si.js" type="text/javascript"
        charset="utf-8"></script>

<s:if test=" language=='si' ">
    <script src="${pageContext.request.contextPath}/lib/jquery/fullcalender/locale_si.js" type="text/javascript"
            charset="utf-8"></script>
</s:if>
<s:elseif test=" language=='ta' ">
    <script src="${pageContext.request.contextPath}/lib/jquery/fullcalender/locale_ta.js" type="text/javascript"
            charset="utf-8"></script>
</s:elseif>
<s:else>
    <script src="${pageContext.request.contextPath}/lib/jquery/fullcalender/locale_en.js" type="text/javascript"
            charset="utf-8"></script>
</s:else>

<div id="calender-schedule-module-title" class="module-home-title">
    <s:if test="#session.userGroup !='slc'">
        <s:a><img src="${pageContext.request.contextPath}/images/calendar-icon.png"
              alt="Calender Schedule"><span><s:label
            value="%{getText('calender_schedule_view.label')}"/></span></s:a>
    </s:if>



</div>

<style type="text/css" media="screen">
</style>

<script type="text/javascript" charset="utf-8">
    var scheduleData;
    function init() {

        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();


        scheduler.config.multi_day = true;

        scheduler.config.xml_date = "%Y-%m-%d %H:%i";
        scheduler.config.first_hour = 8;

        scheduler.config.prevent_cache = true;
        scheduler.init('scheduler_here', date, "month");

        $.getJSON('${pageContext.request.contextPath}/common/CalenderLookupService', {type:"calender",mode:"getList",edit:"no"}, function(data) {
            scheduleData = data.allScheduleData;
            scheduler.parse(scheduleData, "json");
        });

        //block all modifications
        scheduler.config.readonly_form = true;

        scheduler.attachEvent("onBeforeDrag", function() {
            return false;
        });

        scheduler.attachEvent("onClick", function (event_id, native_event_object) {
            if (scheduler.getState().mode == "year") {
                return true;
            } else {
                return false;
            }
        });

        scheduler.config.details_on_dblclick = true;
        scheduler.config.dblclick_create = false;

        /*scheduler.config.lightbox.sections = [
         { name:"userselect", height:50, map_to:"text", type:"textarea", focus:true },
         { name:"location", height:22, map_to:"user_id", type:"textarea"},
         { name:"description", height:43, type:"textarea", map_to:"details" },
         { name:"mapUser", height:22, type:"textarea", map_to:"mapUser"},
         { name:"time", height:72, type:"time", map_to:"auto"}
         ];*/
        //with out organization
        scheduler.config.lightbox.sections = [
            { name:"userselect", height:20, map_to:"text", type:"textarea", focus:true },
            { name:"description", height:50, map_to:"location", type:"textarea"}//,
            //{ name:"mapUser", height:22, type:"textarea", map_to:"mapUser"},
            //{ name:"time", height:72, type:"time", map_to:"auto"}
        ];


    }
    function show_minical() {
        if (scheduler.isCalendarVisible())
            scheduler.destroyCalendar();
        else
            scheduler.renderCalendar({
                position:"dhx_minical_icon",
                date:scheduler._date,
                navigation:true,
                handler:function(date, calendar) {
                    scheduler.setCurrentView(date);
                    scheduler.destroyCalendar()
                }
            });

    }

</script>

<body onload="init();">


<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%; '>
    <div class="dhx_cal_navline">
        <div class="dhx_cal_prev_button">&nbsp;</div>
        <div class="dhx_cal_next_button">&nbsp;</div>
        <div class="dhx_cal_today_button"></div>
        <div class="dhx_cal_date"></div>
        <div class="dhx_minical_icon" id="dhx_minical_icon" onclick="show_minical()">&nbsp;</div>


        <div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
        <div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
        <div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
        <div class="dhx_cal_tab" name="year_tab" style="right:270px;"></div>
    </div>
    <div class="dhx_cal_header">
    </div>
    <div class="dhx_cal_data">
    </div>
</div>
</body>
